<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考试管理</title>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!--查看的form表单-->
<div id="userItem" style="display: none;position: relative;margin: 50px">
    <form class="layui-form layui-form-pane" lay-filter="viewForm">
        <div class="layui-form-item">
            <label class="layui-form-label">序号</label>
            <div class="layui-input-inline">
                <input type="text" name="examId" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属年级</label>
            <div class="layui-input-inline">
                <input type="text" name="gradeId" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属考试</label>
            <div class="layui-input-inline">
                <input type="text" name="classId" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属科目</label>
            <div class="layui-input-inline">
                <input type="text" name="courseId" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试名称</label>
            <div class="layui-input-inline">
                <input type="text" name="examName" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试类型</label>
            <div class="layui-input-inline">
                <input type="text" name="examType" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试分数</label>
            <div class="layui-input-inline">
                <input type="text" name="examScore" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试状态</label>
            <div class="layui-input-inline">
                <!--                <input type="text" name="courseStatus" lay-verify="required" autocomplete="off" class="layui-input" disabled>-->
                <select name="examStatus" disabled>
                    <option value="0">启用</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
    </form>
</div>

<!--修改的表单-->
<div id="editUser" style="display: none;position: relative;margin: 50px">
    <form class="layui-form layui-form-pane" lay-filter="editForm" id="editForm" action="/exam/update">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">序号</label>
            <div class="layui-input-inline">
                <input type="text" name="examId" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试名称</label>
            <div class="layui-input-inline">
                <input type="text" name="examName" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属年级</label>
            <div class="layui-input-inline">
                <input type="text" name="gradeId" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属考试</label>
            <div class="layui-input-inline">
                <input type="text" name="classId" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属课程</label>
            <div class="layui-input-inline">
                <input type="text" name="courseId" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试类型</label>
            <div class="layui-input-inline">
                <input type="text" name="examType" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试分数</label>
            <div class="layui-input-inline">
                <input type="text" name="examScore" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试时间</label>
            <div class="layui-input-inline">
                <input type="text" name="examDate" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试状态</label>
            <div class="layui-input-inline">
                <select name="examStatus" id="examStatusSelect">
                    <option selected disabled>请设置状态</option>
                    <option value="0">启用</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


<!--新增课程-->
<div id="addexam" style="display: none;position: relative;margin: 50px">
    <form class="layui-form layui-form-pane" lay-filter="addForm" id="addForm" action="/exam/add">
        <div class="layui-form-item">
            <label class="layui-form-label">考试名称</label>
            <div class="layui-input-inline">
                <input type="text" name="examName" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属年级</label>
            <div class="layui-input-inline">
                <input type="text" name="gradeId" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属考试</label>
            <div class="layui-input-inline">
                <input type="text" name="classId" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属课程</label>
            <div class="layui-input-inline">
                <input type="text" name="courseId" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试类型</label>
            <div class="layui-input-inline">
                <input type="text" name="examType" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试分数</label>
            <div class="layui-input-inline">
                <input type="text" name="examScore" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试时间</label>
            <div class="layui-input-inline">
                <input type="text" name="examDate" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试状态</label>
            <div class="layui-input-inline">
                <select name="examStatus" id="addexamStatus">
                    <option selected disabled>请设置状态</option>
                    <option value="0">启用</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="subadd">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
            </div>
        </div>
    </form>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="insert">新增</a></button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="modifyStatus">修改状态</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    $(function () {
        $("#resetBtn").click()
    })
</script>
<script>
    layui.use(['table', 'dropdown', 'form', 'upload'], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        let form = layui.form;
        let upload = layui.upload;
        // 创建渲染实例
        table.render({
            elem: '#test'
            , url: '/exam/list'
            , toolbar: '#toolbarDemo'
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '帮助'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , height: 'full-200'
            , cellMinWidth: 80
            , totalRow: true
            , page: true
            , limit: 10
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'examId', fixed: 'left', width: 80, title: 'ID', sort: true, totalRowText: '合计：'}
                , {field: 'examName', width: 120, title: '考试名称'}
                , {field: 'gradeId', width: 120, title: '所属年级'}
                , {field: 'classId', width: 120, title: '所属班级'}
                , {field: 'courseId', width: 120, title: '所属科目'}
                , {field: 'examType', width: 120, title: '考试类型'}
                , {field: 'examScore', width: 120, title: '考试分数'}
                , {field: 'examDate', width: 120, title: '考试时间'}
                , {
                    field: 'examStatus', width: 100, title: '考试状态', templet: function (data) {
                        if (data.examStatus == 0)
                            return '<span style="color: #00FF00">启用</span>';
                        else
                            return '<span style="color: #d43f3a">停用</span>';
                    }
                }
                , {fixed: 'right', title: '操作', width: 270, minWidth: 270, toolbar: '#barDemo'}
            ]]
        });

        // 更多测试
        dropdown.render({
            elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
            , data: [{
                id: 'add',
                title: '添加'
            }, {
                id: 'update',
                title: '编辑'
            }, {
                id: 'delete',
                title: '删除'
            }]
            //菜单被点击的事件
            , click: function (obj) {
                var checkStatus = table.checkStatus(id)
                var data = checkStatus.data; // 获取选中的数据
                switch (obj.id) {
                    case 'add':
                        layer.open({
                            title: '添加',
                            type: 1,
                            area: ['80%', '80%'],
                            content: '<div style="padding: 16px;">自定义表单元素</div>'
                        });
                        break;
                    case 'update':
                        if (data.length !== 1) return layer.msg('请选择一行');
                        layer.open({
                            title: '编辑',
                            type: 1,
                            area: ['80%', '80%'],
                            content: '<div style="padding: 16px;">自定义表单元素</div>'
                        });
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            return layer.msg('请选择一行');
                        }
                        layer.msg('delete event');
                        break;
                }
            }
        });


        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'getData':
                    var getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
                case 'insert':
                    $("#resetBtn").click()
                    //打开模态
                    editDiv = layer.open({
                        title: '新增',
                        type: 1,
                        area: ['60%', '60%'],
                        content: $("#addexam"),
                        shade: 0
                    });
                    break;

            }
        });

        //触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //发起ajax真正删除一行
                    $.ajax({
                        url:"/exam/deleteByid",
                        type:'get',
                        data:{
                            examId:data.examId
                        },
                        success:function (data) {
                            if (data.code==0){
                                //delete success
                                obj.del();
                                layer.close(index);
                            } else {
                                //fail
                                layer.msg(data.msg);
                            }
                        }
                    })

                });
            } else if (obj.event === 'edit') {
                //编辑
                form.val('editForm', {
                    'examId': data.examId,
                    'examName': data.examName,
                    'gradeId': data.gradeId,
                    'classId': data.classId,
                    'courseId': data.courseId,
                    'examType':data.examType,
                    'examScore':data.examScore,
                    'examDate':data.examDate,
                    'examStatus':data.examStatus
                })
                editDiv = layer.open({
                    title: '编辑',
                    type: 1,
                    area: ['60%', '60%'],
                    content: $("#editUser"),
                    shade: 0
                });
            } else if (obj.event === 'view') {
                form.val('viewForm', {
                    //查看
                    'examId': data.examId,
                    'examName': data.examName,
                    'gradeId': data.gradeId,
                    'classId': data.classId,
                    'courseId': data.courseId,
                    'examType':data.examType,
                    'examScore':data.examScore,
                    'examDate':data.examDate,
                    'examStatus':data.examStatus
                })
                layer.open({
                    title: '考试信息',
                    type: 1,
                    area: ['60%', '60%'],
                    content: $("#userItem"),
                    shade: 0
                });
            } else if (obj.event === "modifyStatus") {
                //修改状态
                console.log(data)
                var examIds = data.examId
                console.log(examIds)
                $.ajax({
                    url: '/exam/updatestatusByid',
                    type: 'get',
                    data: {
                        "examId": examIds,
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            table.reload('test')
                            layer.close("editDiv");
                        } else {
                            layer.msg(data.msg)
                        }
                    }
                })
            }
        });
        //提交修改
        form.on('submit(sub)', function (data) {
            let da = data.field;
            // da.userPic = $("#editUserPic").attr("src")
            let url = $("#editForm").attr("action")
            console.log(JSON.stringify(da));
            $.ajax({
                url: url,
                type: 'put',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(da),
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg("修改成功")
                        table.reload("test");
                        layer.close(editDiv)
                    } else {
                        layer.msg(data.msg)
                    }
                }
            })
            return false;
        })

        //提交新增
        form.on('submit(subadd)', function (data) {
            let da = data.field;
            // da.userPic = $("#editUserPic").attr("src")
            let url = $("#addForm").attr("action")
            console.log(JSON.stringify(da));
            console.log(url);
            $.ajax({
                url: url,
                type: 'put',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(da),
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg("新增成功")
                        table.reload("test");
                        layer.close(editDiv)
                    } else {
                        layer.msg(data.msg)
                    }
                }
            })
            return false;
        })
    })
</script>
</body>
</html>